<template>
<div id="wrapper">
  <nav-bar>
      <router-link class="navbar-item title" to="/search">
          Back
      </router-link>
  </nav-bar>
  <main>
    <section class="hero is-info">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            Status: {{ title }}
          </h1>
        </div>
      </div>
    </section>
    <section class="section">
      <span class="button" @click="reloadDB">Reload</span>
      <hr>
      <span class="button" @click="openDemo">Open & Load Demo File</span>
      <hr>
      <div class="buttons">
        <span class="button" @click="openFile">Open File</span>
        <span class="button" @click="resetDB" :disabled="initdbPath === ''">Load</span>
        <p>{{ initdbPath }}</p>
      </div>
    </section>
  </main>
</div>
</template>

<script>
import { DBReloader } from '@/mixins'
import NavBar from '@/components/NavBar'
const ipc = require('electron').ipcRenderer

export default {
  name: 'settings-page',
  mixins: [ DBReloader ],
  components: {
    NavBar
  },
  computed: {
    ipc: function () {
      return ipc
    }
  },
  created: function () {
    this.ipc.on('selected-file', this.selectedFileListener)
  },
  destroyed: function () {
    this.ipc.removeListener('selected-file', this.selectedFileListener)
  },
  methods: {
    selectedFileListener (event, path) {
      this.initdbPath = path[0]
    },
    reloadDB () {
      this.reload()
    },
    resetDB () {
      this.$db.tryReset(this.setStatus, this.initdbPath)
    },
    openDemo () {
      this.initdbPath = ''
      this.reset()
    },
    openFile () {
      this.ipc.send('open-file-dialog')
    }
  }
}
</script>

<style>

</style>
